<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>1.音乐播放器</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- 音乐播放器 -->
  <div class="player-wrap">
    <!-- 歌曲信息卡片 -->
    <div class="player-info">
      <div class="info">
        <div class="name">我记得</div>
        <div class="singer-album">赵雷-署前街少年</div>
        <!-- 进度条 -->
        <div class="music_progress">
          <div class="music_progress_top">
            <span class="current-time">00:00</span>
            <span class="time">05:29</span>
          </div>
          <div class="music_progress_bar">
            <div class="music_progress_line"></div>
          </div>
        </div>

      </div>
    </div>
    <!-- 音乐控制器 -->
    <div class="player-control">
      <!-- 封面唱片 -->
      <div class="cover">
        <img src="http://p1.music.126.net/FCWD6ibS2JK2B3QAnXuzwQ==/109951167805892385.jpg?param=300x300" alt="封面">
      </div>
      <!-- 按钮控制 -->
      <div class="control">
        <i id="prevBtn" class="fa fa-step-backward"></i>
        <i id="playBtn" class="fa fa-play"></i>
        <i id="nextBtn" class="fa fa-step-forward"></i>
        <i id="openModal" class="fa fa-reorder"></i>
      </div>
    </div>
  </div>

  <!-- 页面背景 -->
  <div class="mask_bg"></div>

  <audio src=""></audio>

  <!-- 模态框 -->
  <div class="modal">
    <div class="modal-box">
      <div class="modal-box-top">
        <div class="modal-title">音乐列表</div>
        <div class="modal-close">
          <i class="fa fa-remove"></i>
        </div>
      </div>
      <div class="modal-wrapper">
        <ul class="music-list">
          <li>
            <span>01.我记得-赵雷</span>
            <span class="fa fa-play-circle play-circle"></span>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script src="./index.js"></script>
</body>

</html>